.book {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.text {
  width: auto;
  margin-left: 20rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  text {
    font-size: 28rpx;
    color: #999999;

    &.active {
      font-weight: bold;
      color: #0091ea;
    }
  }
}

.control {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.control_content {
  width: 120px;
  height: 60rpx;
  margin-right: 20rpx;
  background: #81d5fa;
  border-radius: 30rpx;
  box-shadow: 6rpx 6rpx 0px 0px #0091ea;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    font-size: 28rpx;
    color: #ffffff;
    line-height: 56rpx;
  }

  image {
    width: 32rpx;
    margin-left: 20rpx;
  }
}

.table {
  width: 100%;
  margin-top: 20rpx;
  max-height: 660rpx;
  overflow-y: auto;
}

.table_title {
  width: 100%;
  background-color: #faac05;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .table_content_text {
    text {
      color: #fff;
    }
  }
}

.table_content {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &:nth-child(2n + 1) {
    background-color: #fef7e6;
  }

  &:nth-child(2n) {
    background-color: #e5f4fd;
  }

  &.active {
    background-color: #0091ea;

    .table_content_text {
      text {
        color: #fff;

        &.active {
          color: #fff;
        }
      }
    }
  }

  &:last-child {
    .table_content_text {
      border-bottom: 0;
    }
  }
}

.table_content_text {
  flex: 1;
  height: 64rpx;
  box-sizing: content-box;
  border-right: 2rpx solid #fff;
  border-bottom: 2rpx solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    font-size: 28rpx;
    color: #999;
    font-weight: 700;
    line-height: 64rpx;

    &.active {
      color: #0091ea;
      text-decoration: underline;
    }
  }

  image {
    width: 24rpx;
    height: 24px;
    margin-left: 4rpx;
  }

  &:last-child {
    border-right: 0;
  }
}

.default {
  width: 100%;
  padding-top: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: 501rpx;
  }
}

.details {
  width: 686rpx;
  padding: 28rpx 28rpx 56rpx;
  background: #ffffff;
  border-radius: 16rpx;

  .word {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    text {
      font-size: 36rpx;
      font-weight: bold;
      color: #0091ea;
      text-align: center;
    }
  }

  .example {
    width: 100%;
    height: 240rpx;
    margin: 24rpx 0;
    padding: 36rpx 24rpx;
    background: #f5f5f5;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    text {
      font-size: 28rpx;
      color: #0091ea;
    }

    .example_button {
      width: 172rpx;
      height: 52rpx;
      background: #0091ea;
      border-radius: 26px;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 36rpx;
      }
    }
  }

  .image {
    width: 100%;
    height: 375rpx;
    border-radius: 16rpx;
    overflow: hidden;

    image {
      width: 100%;
    }
  }

  .play {
    width: 100%;
    margin-top: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    text {
      font-size: 32rpx;
      color: #666666;
      padding-right: 12rpx;
    }

    .play_button {
      width: 84rpx;
      height: 84rpx;
      margin-left: 12rpx;
      background: #ffc71c;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 36rpx;
      }
    }
  }

  .button {
    width: auto;
    margin-top: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .button_content {
      width: 204rpx;
      height: 56rpx;
      margin: 0 56rpx;
      border-radius: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/button_bg4.png) center/cover no-repeat scroll;

      text {
        font-size: 28rpx;
        color: #ffffff;
        font-weight: 700;
      }
    }
  }
}